<template>
	<view class="status_header" :style="{height:statusBarHeight + 'px'}"></view>
	 <view class="header" :style="{height:headerHeight+'px'}">
		 <view class="logo" :style="{height:imgSize+'px',width:imgSize+'px'}">
		 	<image :style="{height:imgSize+'px',width:imgSize+'px'}"   class="img_logo" src="../../static/imgs/logo.jpg" mode="aspectFill"></image>
		 </view>
		 <view class="search"  :style="{height:imgSize +'px'}">
			 <view class="iinput">
			 	<input class="search_input" type="text" ></input>
				<view class="search_info">
					<uni-icons class="search_icon" type="search"></uni-icons>
					<span class="seach_place">搜索</span>
				</view>
			 </view>
			 
		 	
		 </view>
	</view>
</template>

<script setup>
	import { onMounted, ref } from 'vue';
	
	const statusBarHeight = ref(0)
	const menuBarHeight = ref(0)
	const headerHeight = ref(0)
	const headerWidth = ref(0)
	const imgSize = ref(0)
	const searchInputHeight = ref(0)
		
	onMounted(()=>{
		let systemInfo = uni.getSystemInfoSync();
		console.log('systemInfo:',systemInfo);
		// #ifdef MP-WEIXIN
			statusBarHeight.value = systemInfo.statusBarHeight;  //47
			console.log('statusBarHeight.value:',statusBarHeight.value);
			
			let menuBar =  uni.getMenuButtonBoundingClientRect();
			console.log('menuBar:',menuBar);
			menuBarHeight.value = menuBar.height;
			searchInputHeight.value = menuBar.height
			let menuBarTop = menuBar.top; //51
			console.log('menuBarTop:',menuBarTop);
			//menuBar的宽度
			headerWidth.value =  menuBar.width
			//menuBar的padding值
			let menuBarPadding = menuBarTop-statusBarHeight.value;
			//menubar整体高度
			headerHeight.value = menuBarPadding*2 + menuBarHeight.value;
			console.log('headerHeight.value:',headerHeight.value);
			
			imgSize.value = headerHeight.value 
			console.log('imgSize.value:',imgSize.value);
		// #endif
		
		// #ifndef MP-WEIXIN
			statusBarHeight.value = 0;
			headerHeight.value= 60;
			imgSize.value = 40
			searchInputHeight.value = 30
		// #endif
		
		console.log('statusBarHeight.value:',statusBarHeight.value);
		console.log('headerHeight.value:',headerHeight.value);
	})
</script>

<style lang="scss" scoped>
.status_header{
		// border: 1rpx solid red;
	}
	.header{
		width: 100%;
		display: flex;
		align-items: center;
		.logo{
			height: 100rpx;
			width: 100rpx;
			.img_logo{
				height: 100%;
				width: 100%;
			}
		}
		.search{
			width: 40%;
			display: flex;
			align-items: center;
			margin-left: 40rpx;
			.iinput{
				height: 55%;
				width: 75%;
				border-radius: 50rpx;
				border: 1rpx solid $border-color;
				display: flex;
				position: relative;
				.search_info{
					display: flex;
					position: absolute;
					left: 15rpx;
					align-items: center;
					color: $border-color;
					.search_icon{
						color: $border-color;
					}
				}
			}
		}
	}
</style>